<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大嘿嘿后台管理</title>
		<link rel="stylesheet" type="text/css" href="css/antd.css"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/antd.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios-0.18.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/interfaceuRL.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		table{
			margin-top: 30px;
			width: 100%;
			height: 100%;
			text-align: center;
		}
		.a1{
			display: flex;
			justify-content: space-between;
		}
		.b1{
			border:0.00625rem solid black;
			width: 20px;
			text-align: center;
		}
		.b1 a{
			color: #000000;
		}
		.b11{
			display: flex;
			justify-content: space-between;
			background-color: #f5faff;
			margin-top:20px;
		}
	</style>
	<body>
		<div id="app">
		<div class="b11">

			<div><a href="fl.html"><input type="button"  value="+添加分类" style="background-color: #5694e4;border: 1px solid #5694e4;color: white;" /></a></div>
			<div >共{{CatelogItem.length}} 条记录</div>

		</div>
		<div class="a1">
			<div style="text-align: center;">
				显示 
				<select name=""  class="num" @change="changeSize()">
					<option value="10">10</option>
					<option value="9">9</option>
					<option value="8">8</option>
					<option value="7">7</option>
					<option value="6">6</option>
					<option value="5">5</option>
					<option value="4">4</option>
					<option value="3">3</option>
					<option value="2">2</option>
					<option value="1">1</option>
				</select>
				条
				</div>
			<div colspan="8" style="text-align:right;">从当前数据中检索:<input type="text" id="" value=""  v-model="userkey"/></div>
		</div>
		<table border="" cellspacing="0" cellpadding="">
			
			<tr style="background-color:#f5faff ;font-weight:bold;">
				<td><input type="checkbox" /></td>
				<td style="background-color:#f5faff">分类标识</td>
				<td>分类名称</td>
				<td>分类简介</td>
				<td>操作</td>
			</tr>
			<tr v-for="(item,index) in cc" :key="index">
				<td><input type="checkbox" name="" id="" value=""/></td>
				<td style="background-color: #f5faff;">{{item.gid}}</td>
				<td>{{item.gname}}</td>
				<td>{{item.detail}}</td>
				
				<td>
					<span class="glyphicon glyphicon-pencil" @click="Update(item.gid)"></span>
					<span class="glyphicon glyphicon-cloud" @click="delEmp(item.gid)"></span>
				</td>
			</tr>
			
		</table>
		<!-- 下 分页 -->
				<div id="" style="display: flex;">
					<span style="margin-left: 50px;margin-top: 20px;">
						<span v-if="num==0">没有数据</span>
						<span v-else>显示 {{1+(pageSize*currentPage)}} 到 {{pageSize*(currentPage)+cc.length}}</span>
						， 共 {{num}} 条
					</span>
					<nav aria-label="Page navigation"  style="position: absolute;right: 0px;margin-right: 50px;">
					  <ul class="pagination">
					    <li  @click="prePage()">
					      <a href="#" aria-label="Previous">
					        <span aria-hidden="true">上一页</span>
					      </a>
					    </li>
						</ul>
						
						<ul class="pagination" v-for="index of pageNum" :key="index">
							<li @click="Page(index)"><a href="#">{{index}}</a></li>
						</ul>
						
						<ul class="pagination">
					    <li  @click="nextPage()">
					      <a href="#" aria-label="Next">
					        <span aria-hidden="true">下一页</span>
					      </a>
					    </li>
					  </ul>
					</nav>
					
				</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	var vm=new Vue({
		el:"#app",
		data:{
			userkey:"",
			CatelogItem:[],
			num:0,
			  // 所有页面的数据
			  totalPage: [],
			  // 每页显示数量
			  pageSize: 4,
			  // 共几页
			  pageNum: 1,
			  // 当前显示的数据
			  dataShow: "",
			  // 默认当前显示第一页
			  currentPage: 0,
			
		},
		
		//在挂载开始之前被调用：相关的渲染函数首次被调用
				beforeMount: function() {
					var _this=this;
					var url=findCatelog();
					axios({
					   //请求方式，'GET'或者'POST'
					    method: 'GET',
					    //请求地址
					    url: url
					}).then(res => {
		                 	_this.CatelogItem=res.data;
							
					}).catch(err => {
						alert("服务出错了!")
						
					  });
				
				 },
				 //查询
				computed:{
					cc:function(){
						var _this=this;
						_this.num=0;											
						mess=[];
						 _this.CatelogItem.filter(function(val){
							
							if(val.gname.indexOf(_this.userkey)!=-1){
								mess.push(val)
								_this.num++
							}
							
						})
						
						// 根据后台数据的条数和每页显示数量算出一共几页,得0时设为1 ;
						_this.pageNum = Math.ceil(mess.length / _this.pageSize) || 1;
						
						   for (let i = 0; i < _this.pageNum; i++) {
							  // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
							  // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为3， 则第一页是1-3条，即slice(0,3)，第二页是4-6条，即slice(3,6)...
							  _this.totalPage[i] = mess.slice(_this.pageSize * i, _this.pageSize * (i + 1))
							}
						   // 获取到数据后显示第一页内容
							return _this.totalPage[_this.currentPage];
							
					}
				},
				//删除
				methods:{
					delEmp:function(id){
						//将数组中的某行删除						
						var isOk=confirm;
						if(isOk){
							axios({
							   //请求方式，'GET'或者'POST'
							    method: 'GET',
							    //请求地址
							    url:CatelogDel()+id
							}).then(res => {
								//_this.UserItem=res.data;
							      	alert(res.data.msg)
									 window.location.reload()
							}).catch(err => {
								alert("服务出错了!")
								
							  });
							//this.UserItem.splice(id,1)
						}
						},
					//修改
					Update:function(gid){
						window.location.href="./fenleixg.html?gid="+gid;
					},
					//改变显示条数
					changeSize:function(){
						this.pageSize=$(".num").val();
					},
					
					//点击页数
					Page:function(index) {
					  this.dataShow = this.totalPage[index-1];
					  this.currentPage=index-1;
					},
					// 上一页和下一页
					// 下一页
					nextPage:function() {
					  if (this.currentPage === this.pageNum - 1) return ;
					  this.dataShow = this.totalPage[++this.currentPage];
					},
					// 上一页
					prePage:function() {
					  if (this.currentPage === 0) return ;
					  this.dataShow = this.totalPage[--this.currentPage];
					},
				}
					
				
	})
</script>